<script setup lang="ts">
import DocNavBar from '@/components/nav-bar.vue'
defineOptions({
  name: 'user-login'
})

import { ref } from 'vue'
const username = ref('')
const password = ref('')

const userNameRules = ref([
  { required: true, message: '请填写用户名' },
  {
    validator: (val: string) => {
      const lengthV = val.length === 11
      const firstV = val[0] === '1'
      const secondV = [3, 5, 8, 7].includes(+val[1])
      return lengthV && firstV && secondV
    },
    message: '用户名格式错误'
  }
])
const passwordRules = ref([
  { required: true, message: '请填写密码' },
  {
    validator: (val: string) => {
      return val === 'abc12345'
    },
    message: '密码格式错误'
  }
])

// 收集用户是否同意协议 如果没有同意 按钮应该禁用
const isCheck = ref(false)

const showPass = ref(false)

import { userLoginAPI } from '@/api/user'
import { useUserStore } from '@/stores'
const userStore = useUserStore()

import { useRouter } from 'vue-router'
const router = useRouter()
const onSubmit = () => {
  const formData = {
    mobile: username.value,
    password: password.value
  }
  userLoginAPI(formData)
    .then((res) => {
      userStore.token = res.data!.token
      userStore.userinfo = res.data!
      router.push('/')
    })
    .catch()
}
</script>

<template>
  <DocNavBar right-text="注册"></DocNavBar>

  <div class="login-form">
    <div class="methods">
      <div class="active">密码登录</div>
      <div class="unActive">验证码登录<van-icon name="arrow" /></div>
    </div>
    <van-form @submit="onSubmit" class="form">
      <!-- :rules="[{ required: true, message: '请填写用户名' }]" -->
      <van-field
        v-model="username"
        name="username"
        :border="false"
        placeholder="手机号"
        :rules="userNameRules"
      />
      <!-- :rules="[{ required: true, message: '请填写密码' }]" -->
      <van-field
        v-model="password"
        :type="showPass ? 'text' : 'password'"
        :border="false"
        name="password"
        placeholder="密码"
        :rules="passwordRules"
      >
        <template #right-icon>
          <div @click="showPass = !showPass">
            <doc-icon v-show="showPass" name="login-eye-on"></doc-icon>
            <doc-icon v-show="!showPass" name="login-eye-off"></doc-icon>
          </div>
        </template>
      </van-field>
      <van-cell class="isCheck" :border="false">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <van-radio-group v-model="isCheck">
            <van-radio :name="true" icon-size="14" />
          </van-radio-group>

          <div class="content">
            <span data-v-2bf2fc29="">我已同意</span>
            <i data-v-2bf2fc29="" href="javascript:;">用户协议</i>
            <span data-v-2bf2fc29="">及</span>
            <i data-v-2bf2fc29="" href="javascript:;">隐私条款</i>
          </div>
        </template>
      </van-cell>

      <van-cell :border="false">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <van-button type="success" size="large" round :disabled="!isCheck" native-type="submit"
            >登 录</van-button
          >
        </template>
      </van-cell>

      <van-cell :border="false" class="forgot_pass">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title> 忘记密码? </template>
      </van-cell>
    </van-form>
    <div class="qq">
      <div class="title"><span>第三方登录</span></div>
      <div class="icon">
        <img src="@/assets/svg_icon/qq.svg" alt="" />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.login-form {
  margin: 30px;
  .methods {
    display: flex;
    justify-content: space-between;
    line-height: 1;
    // 无换行时子元素在副轴上的排列方式
    align-items: flex-end;
    margin-bottom: 50px;
    .active {
      font-size: 24px;
      font-weight: bold;
    }
    .unActive {
      font-size: 17px;
    }
  }
  :deep(.form) {
    .van-field {
      //   &::after {
      //     display: none;
      //   }
      border-bottom: 1px solid var(--van-cell-border-color);
    }

    .isCheck {
      padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);
      .van-cell__title {
        display: flex;
        align-items: center;
        .van-radio-group {
          .van-radio {
            margin-right: 10px;
          }
          .content {
            i {
              margin: 0 5px;
              color: var(--van-success-color);
            }
          }
        }
      }
    }

    .forgot_pass {
      font-size: 12px;
    }
  }
  .qq {
    margin-top: 60px;
    text-align: center;
    .title {
      position: relative;
      margin-bottom: 16px;
      span {
        position: relative;
        padding: 0 20px;
        background-color: #fff;
        z-index: 2;
        font-size: 12px;
        color: var(--van-divider-text-color);
      }
    }
    .title::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 1px;
      background-color: var(--van-cell-border-color);
      left: 0;
      top: 50%;
    }

    .icon {
      img {
        width: 36px;
        height: 36px;
        padding: 4px;
      }
    }
  }
}
</style>
@/stores/modules/user
